<!--
 * @Description: 逾期节点管理
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-02-17 10:49:13
 * @LastEditTime: 2023-02-27 17:48:51
 * @LastEditTime: 2023-02-24 10:22:49
 * @FilePath: \cscec-pms-admin\src\views\construction\overdueNodeManagement\index.vue
-->
<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 标签切换 -->
    <div class="switch-tag-container">
      <div class="tag-item" :class="{ current: item.text === tagOptions.current }" v-for="item in tagOptions.list" :key="item.text" @click="handleSwitch(item)">{{ item.text }}</div>
    </div>
    <!-- 主内容区 -->
    <MasterPlan v-if="tagOptions.current === '内控计划'" />
    <WeekPlan v-else-if="tagOptions.current === '周计划'" />
    <ContractPlan v-else-if="tagOptions.current === '合同计划'" />
    <MonthPlan v-else-if="tagOptions.current === '月计划'" />
    <CompletionPlan v-else-if="tagOptions.current === '竣工收尾计划'" />
  </base-breadcrumb>
</template>
<script>
import MasterPlan from './components/MasterPlan'
import WeekPlan from './components/WeekPlan'
import ContractPlan from './components/contractPlan'
import CompletionPlan from './components/completionPlan'
import MonthPlan from './components/monthPlan'


export default {
  name: 'overdueNodeManagement',
  components: {
    MasterPlan,
    WeekPlan,
    ContractPlan,
    CompletionPlan,
    MonthPlan
  },
  data() {
    return {
      tagOptions: {
        current: '合同计划',
        list: [{ text: '合同计划' },{ text: '内控计划' }, { text: '月计划' },{ text: '周计划' },{ text: '竣工收尾计划' }]
      }
    }
  },
  methods: {
    handleSwitch(item) {
      this.tagOptions.current = item.text
    }
  }
}
</script>
<style lang="less" scoped>
.switch-tag-container {
  .tag-item {
    display: inline-block;
    border: 1px solid #999;
    background: #fff;
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    position: relative;
    &:not(&:first-child) {
      margin-left: -1px;
    }

    &.current {
      color: #008cee;
      border-color: #008cee;
      z-index: 10;
    }
  }
}
</style>
